<template>
	<el-main style="padding: 20px">
		<el-button size="small" @click="addTimu" type="primary" style="display: block; margin-bottom: 10px">
			添加习题（带有图片或视频）</el-button>
		</el-button>

		<!-- 添加习题 带视频图片的 -->
		<el-dialog title="添加习题" style="padding: 0px" :close-on-click-modal="false" :visible.sync="xiti">
			<el-form :model="xitiData" :rules="xitirules" ref="addxitiData" style="margin: 0px; padding: 0px">
				<el-form-item label="题目:" prop="timu">
					<el-input prefix-icon="el-icon-edit" v-model="xitiData.content" size="mini" placeholder="请输入题目">
					</el-input>
				</el-form-item>

				<el-form-item label="题目图片" prop="img">
					<el-upload class="avatar-uploader" :show-file-list="false" action="/file/upload" name="fileData"
						:on-success="handleAvatarSuccess1">
						<img v-if="xitiData.imgUrl" :src="xitiData.imgUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>

				<el-form-item label="题目视频" prop="video">
					<el-upload class="avatar-uploader" :show-file-list="false" action="/file/upload" name="fileData"
						:on-success="handleAvatarSuccess2">
						<video v-if="xitiData.fileUrl" height="300px" preload="auto" controls=""
							:src="xitiData.fileUrl"></video>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>

				<el-form-item label="答案解析:" prop="analysis">
					<el-input prefix-icon="el-icon-edit" v-model="xitiData.analysis" size="mini" placeholder="请输入答案解析">
					</el-input>
				</el-form-item>

				<el-form-item label="答案:" prop="answer">
					<el-input prefix-icon="el-icon-edit" v-model="xitiData.answer" size="mini" placeholder="请输入答案">
					</el-input>
				</el-form-item>

				<el-form-item label="选项:" prop="item">
					<el-input prefix-icon="el-icon-edit" v-model="xitiData.item" size="mini"
						placeholder="非必填项，判断题和选择题得多项用 - 隔开"></el-input>
				</el-form-item>

				<el-form-item label="难度:" prop="item">
					<el-input prefix-icon="el-icon-edit" v-model="xitiData.level" size="mini"
						placeholder="从1到3，数字越大难度越高"></el-input>
				</el-form-item>


				<!-- <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select> -->

				<el-form-item>
					<el-button size="mini" @click="cancelEidt">取 消</el-button>
					<el-button size="mini" type="primary" @click="addxiti('addxitiData')">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog :visible.sync="tianjia" width="80%">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="题目">
					<el-input v-model="form.content" placeholder="about"></el-input>
				</el-form-item>
				<el-form-item label="答案解析">
					<el-input type="textarea" v-model="form.analysis"></el-input>
				</el-form-item>
				<el-form-item label="答案">
					<el-input type="textarea" v-model="form.answer"></el-input>
				</el-form-item>
				<el-form-item label="选项">
					<el-input type="textarea" v-model="form.item" placeholder="非必填,判断题和选择题的多选项用 - 隔开"></el-input>
				</el-form-item>
				<el-form-item label="类型">
					<!-- <el-input type="textarea" v-model="form.type"></el-input> -->
					<el-radio-group v-model="setradio" style="margin-top: 20px">
						<el-radio :label="item.categoryCode" v-for="(item, index) in typeList" :key="index">
							{{ item.categoryName }}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">保存</el-button>
					<el-button @click="tianjia = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<div class="table-box">
			<el-table :data="content" style="width: 100%">
				<el-table-column prop="content" label="题目"></el-table-column>
				<el-table-column prop="item" label="选择"></el-table-column>
				<el-table-column prop="answer" label="答案"></el-table-column>
				<el-table-column prop="analysis" label="解析"></el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="setbianji(scope.row)" type="text" size="mini">编辑</el-button>

						<el-button type="text" size="mini" @click="deleteObj(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background layout="prev, pager, next" :page-count="data.pages" :current-page="current"
				@current-change="chaxun"></el-pagination>
		</div>
	</el-main>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				content: [],
				id: "",
				tianjia: false,
				form: {},
				page: 1,
				size: 20,
				current: 1,
				chapid: '',
				setradio: "",
				xitiData: {
					shid: '',
					typeId: '',
					content: "",
					imgUrl: "",
					fileUrl: "",
					analysis: "",
					answer: "",
					item: [],
					type: 9,
					level: "",
					chapterId: "",
				},
				typeList: [],
				xitirules: {
					content: [{
						required: true,
						message: "必填:题目",
						trigger: "blur"
					}],
					answer: [{
						required: true,
						message: "必填:答案",
						trigger: "blur"
					}],
				},
				xiti: false,
				leimuid: '',
			};
		},
		mounted: function() {
			this.id = this.$route.query.id;
			this.chapid = this.$route.query.chaperId
			this.leimuid = this.$route.query.leimuid
console.log(this.id)
console.log(this.leimuid)
console.log(this.chapid)
			this.getData();

			//console.log(this.id);
		},
		watch: {
			radio() {
				this.page = 1;
				this.addWord();
			},
		},
		inject: ["reload"],
		methods: {
			chaxun(val) {
				//console.log(val);
				this.page = val;
				this.getData();
			},
			async addxiti(e) {

				let nowitem = this.xitiData.item.split('-')
				this.xitiData.shid = this.leimuid
				this.xitiData.chapterId = this.id;
				this.xitiData.typeId = 1;
				this.xitiData.item = nowitem
				const data = await this.postJson("/back/practicestores/addPractice", this.xitiData);
				console.log(data.data);
				if (data.data.status == "success") {
					this.reload();

					this.$message(data.data.msg);
					this.cancelEidt();
				}
				//console.log(data);
				//console.log(this.xitiData);
				//console.log(this.$refs[e]);
			},
			cancelEidt() {
				this.xiti = false;
			},
			handleAvatarSuccess1(res, file) {
				this.xitiData.imgUrl = res.url;
				//console.log(this.xitiData.imgUrl);
			},
			handleAvatarSuccess2(res, file) {
				this.xitiData.fileUrl = res.url;
				//console.log(this.xitiData.fileUrl);
			},
			// 添加题目
			addTimu() {
				//console.log("ok");
				this.xiti = true;
			},
			onSubmit() {
				//console.log(this.form);
				// if (this.form.item != null) {
				//   this.form.item = this.form.item.split("-");
				// }
				// isArray(item.item)
				this.postJson(
					"/back/practicestores/updatePractice?id=" + this.form.practiceId,
					this.form
				).then((res) => {
					//console.log(res);
					this.$message(res.data.msg);
					this.tianjia = false;

				});
			},
			setbianji(e) {
				this.form = e;
				this.setradio = this.form.type;
				this.tianjia = true;
			},
			deleteObj(e) {
				let arr = []
				var obj = {
					unitId: +this.id,
					psId: e.practiceId
				}
				arr.push(obj)

				this.postJson("back/practicestores/deletePractice?ids=" + e.practiceId).then(
					(res) => {
						//console.log(res);
						this.reload();
						this.$message(res.data.msg);
					}
				);
			},
			getData() {
				let params = {
					page: this.page,
					size: this.size,
					chapterId: this.id,
					shid: this.leimuid,
					typeId: 1,
				};
				this.postRequest(`/back/practicestores/queryPracticeList`, params).then((res) => {
					// this.data = res.data.data;
					console.log(res)
					this.content = res.data.data.list
					let arr = res.data.data.content;
					for (let item in arr) {
						//console.log(arr[item]);
						for (let value in arr[item]) {
							//console.log(arr[item][value]);
							let list = arr[item][value];

							this.content.push(arr[item][value]);
						}
					}
					//console.log(this.content);
				});
				// this.postJson(`/back/unit/getById`, { unitId: this.id }).then((res) => {
				//   this.data = res.data.data;
				//   let arr = res.data.data.content;
				//   for (let item in arr) {
				//     //console.log(arr[item]);
				//     for (let value in arr[item]) {
				//       //console.log(arr[item][value]);
				//       let list = arr[item][value];

				//       this.content.push(arr[item][value]);
				//     }
				//   }
				//   //console.log(this.content);
				// });
			},
		},
	};
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
